<template>
  <div class="minting">
    <div class="btnAdd" v-if="activeName == 'swap'" @click="activeName = 'userA';swapId=0">
      + 新增
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Swap" name="swap">
        <div v-if="activeName == 'swap' ">
          <TableSwap @onNext="onNexts" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="A方信息" name="userA" disabled>
        <UserView v-if="activeName == 'userA' " name="A" @onNext="onNext" :swapId=swapId />
      </el-tab-pane>
      <el-tab-pane label="B方信息" name="userB" disabled>
        <UserView v-if="swapId && activeName == 'userB'" name="B" @onNext="onNext" :swapId=swapId />
      </el-tab-pane>
      <el-tab-pane label="双方资产确认" name="all" disabled>
        <AssetsBoth v-if="swapId && activeName == 'all'"  name="C" @onNext="onNext" :swapId=swapId />
      </el-tab-pane>
      <el-tab-pane label="AUSD担保" name="AUSD" disabled>
        <AusdView v-if="swapId && activeName == 'AUSD'"  name="D" @onNext="onNext" :swapId=swapId />
      </el-tab-pane>
      <el-tab-pane label="双方互转" name="tran" disabled>
        <TranBoth v-if="swapId && activeName == 'tran'" :swapId=swapId name="tran" />
      </el-tab-pane>
      <!-- + -->
      
    </el-tabs>
  </div>
</template>

<script>

import TableSwap from './TableSwap.vue'
import UserView from './swap/UserView.vue'
import AssetsBoth from './swap/AssetsBoth.vue'
import AusdView from './swap/AusdView.vue'
import TranBoth from './swap/TranBoth.vue'

export default {
  data() {
    return {
      activeName: 'swap',
      swapId:0
    }
  },

  created() {
    // this.getdata(this.formInline)
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 提交后
    onNext(names,id){
      if(id){
        this.swapId = id
        // alert(this.swapId)
      }

      if(names == 'A'){
        this.activeName = 'userB'
      }
      if(names == 'B'){
        this.activeName = 'all'
      }
      if(names == 'C'){
        this.activeName = 'AUSD'
      }
      if(names == 'D'){
        this.activeName = 'tran'
      }
    },

    onNexts(id,names){
      if(id){
        this.swapId = id
        // alert(this.swapId)
      }
      if(names == 1){
        this.activeName = 'userB'
      }
      if(names == 2){
        this.activeName = 'all'
      }
      if(names == 3){
        this.activeName = 'AUSD'
      }
      if(names == 4){
        // window.isTrue = false;
        this.activeName = 'tran'
      }
    },
  },



  // 注册组件
  components: {
    UserView,
    TableSwap,
    AssetsBoth,
    AusdView,
    TranBoth
  },

  // watch:{
  //   activeName:{
  //     handler(newVal,oldVal){
        
  //       if(newVal != 'tran'){
  //         window.isTrue = true
  //       }
       
  //     }
  //   }
  // },
}
</script>

<style scoped>
  .addBox i{font-style: initial;cursor: pointer;}
  .addBox{
    font-size: 14px;
    color: #919191;
    margin-bottom: 30px;
    cursor: pointer;
  }
  .addBox span{color: #1C1E22;}
  .minting{
    position: relative;
    padding:0 20px;
  }
  .btnAdd{
    position: absolute;
    right: 20px;
    background: #1C1E22;
    border-radius:30px;
    color: #fff;
    padding: 4px 20px;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    z-index: 100;

  }
  .minting /deep/ .el-tabs__item{
    width:150px !important;
    text-align: center;
    color: #919191;
    height: 46px;
    font-weight: 500;
    font-size: 15px;
  }
  .minting /deep/ .el-tabs__header{
    margin-bottom: 30px;
  }
  .minting /deep/ .el-tabs__active-bar{
    background: #1C1E22 !important;
  }
  .minting /deep/ .el-tabs__item.is-active{
    color: #1C1E22;
    font-weight: bold;
  }
  .minting /deep/ .el-tabs__nav-wrap::after{
    height: 1px !important;
  }
  .minting /deep/ .el-tabs__active-bar{
    height: 3px;
    border-radius: 2px;
  }
  .asstesBox::-webkit-scrollbar {
    width: 6px;
  }
  .asstesBox::-webkit-scrollbar-track {
      background: rgb(235, 235, 235);
      border-radius: 10px;
  }
  .asstesBox::-webkit-scrollbar-thumb {
      background: rgb(206, 206, 206);
      border-radius: 10px;
  }
</style>

 
 